<div class="content">
    <div id="example_title">
        <h1>More Button Types</h1>
        You can also create various drop down menu buttons:
        <ul>
            <li>menu</li>
            <li>menu-check</li>
            <li>menu-radio</li>
            <li>drop</li>
            <li>html</li>
        </ul>
        Below you can see a toolbar with more buttons types. This demo also shows how to add simple event listener to listen to all
        events.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar"></div>

<!--CODE-->
<script type="module">
import { w2ui, w2toolbar } from '__W2UI_PATH__'

new w2toolbar({
    box: '#toolbar',
    name: 'toolbar',
    items: [
        { type: 'menu', id: 'item1', text: 'Menu', icon: 'fa fa-camera', count: 17, items: [
            { text: 'Item 1', icon: 'fa fa-camera', count: 5 },
            { text: 'Item 2', icon: 'fa fa-picture-o', disabled: true },
            { text: 'Item 3', icon: 'fa fa-glass', count: 12 }
        ]},
        { type: 'break' },
        { type: 'menu-radio', id: 'item2', icon: 'w2ui-icon-info',
            text(item) {
                return 'Radio: ' + item.get(item.selected)?.text
            },
            selected: 'id3',
            items: [
                { id: 'id1', text: 'Item 1', icon: 'fa fa-camera' },
                { id: 'id2', text: 'Item 2', icon: 'fa fa-picture-o' },
                { id: 'id3', text: 'Item 3', icon: 'fa fa-glass', count: 12 }
            ]
        },
        { type: 'break' },
        { type: 'menu-check', id: 'item3', text: 'Check', icon: 'w2ui-icon-settings',
            selected: ['id3', 'id4'],
            onRefresh(event) {
                let item = event.detail.item
                item.count = item.selected.length
            },
            items: [
                { id: 'id1', text: 'Item 1', icon: 'fa fa-camera' },
                { id: 'id2', text: 'Item 2', icon: 'fa fa-picture-o' },
                { id: 'id3', text: 'Item 3', icon: 'fa fa-glass', count: 12 },
                { text: '--' },
                { id: 'id4', text: 'Item 4', icon: 'fa fa-glass' }
            ]
        },
        { type: 'break' },
        { type: 'drop',  id: 'item4', text: 'Dropdown', icon: 'w2ui-icon-drop',
            html: '<div style="padding: 10px; line-height: 1.5">You can put any HTML in the drop down.<br>Include tables, images, etc.</div>'
        },
        { type: 'break', id: 'break3' },
        { type: 'html',  id: 'item5',
            html(item) {
                let html =
                    '<div style="padding: 3px 10px;">'+
                    ' CUSTOM:'+
                    '    <input size="10" onchange="var el = w2ui.toolbar.set(\'item5\', { value: this.value });" '+
                    '         style="padding: 3px; border-radius: 2px; border: 1px solid silver" value="'+ (item.value || '') + '"/>'+
                    '</div>'
                return html
            }
        },
        { type: 'spacer' },
        { type: 'button',  id: 'item6',  text: 'Item 6', icon: 'w2ui-icon-info' }
    ]
})

w2ui.toolbar.on('*', (event) => {
    console.log('EVENT: '+ event.type + ' TARGET: '+ event.target, event)
})
</script>
